<%-- 
    Document   : new_visit_crew
    Created on : Nov 3, 2013, 12:48:14 PM
    Author     : Mansur
--%>

<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@page contentType="text/html" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>.: Ship Visit :.</title>    
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.blockUI.js"></script>   
        <script type="text/javascript">
            $(function() {
                $("#tabs").tabs({active: $('#tabPosition').val()});
                $("#datepicker2").datepicker({
                    showOn: "button",
                    buttonImage: "${pageContext.request.contextPath}/images/icon/calendar.gif",
                    buttonImageOnly: true,
                    changeMonth: true,
                    dateFormat: 'dd/mm/yy',
                    changeYear: false,
                    maxDate: new Date(),
                    minDate: minDate()
                });
            });
            
            function minDate(){
                var year = ${actionBean.currentYear};
                var date = new Date(year,0,1);
                return date;
            }
            
            function validateEmpty(){
                var validate = true;
                 if($('#vesselId').val() === '' || 
                        $('#datepicker2').val() === '' || 
                        $('#location').val() === '' ||
                        $('#master').val() === '' || 
                        $('#imo').val() === '' ||
                        $('#gross').val() === '' ){
                    alert('All form fields are required! except attachment.');
                    validate  = false;
                }
                return validate;
            }
            
            function popupWin(id) {
                var url = '${pageContext.request.contextPath}/shipVisitFlow?editDocument&idStaff=' + id;
                var left = (screen.width/2)-(1000/2);
                var top = (screen.height/2)-(1000/2);                
                var params = 'width=1000';
                params += ', height=1000';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';                
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }                
                return false;
            }
            
            function unblockUI() {
                $.unblockUI();
            }
            
            function blockUI () {
                $.blockUI();
            }
            
            function popupWinView(id) {
                var url = '${pageContext.request.contextPath}/shipVisitFlow?viewDoc&idVisit=' + id;
                var left = (screen.width/2)-(1000/2);
                var top = (screen.height/2)-(1000/2);                
                var params = 'width=1000';
                params += ', height=1000';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';                
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }                
                return false;
            }
            
            function autoComplete(){
                var size = ${actionBean.sizeDesc};
                
                for(var i = 1; i <= size; i++){
                    if($('#summary_'+i).val() === ''){
                        $('#summary_'+i).val("NONE");
                    }
                }
            }
            
            function getImoTonnage(id) {
                var url = '${pageContext.request.contextPath}/shipVisitFlow?getImoTonnage&id=' + id;
                $.get(url,
                        function(data) {
                            var part = data.split("|");
                            $('#imo').val(part[0]);
                            $('#gross').val(part[1]);
                        }, "html");
            }
            </script>
        <style>
            .validateTips { border: 1px solid transparent; padding: 0.3em; color: red; font-weight: bold}
        </style>
    </head>
    <body>
        <s:useActionBean beanclass="exatrez.stripes.util.ListUtil" var="list"/>
        <s:useActionBean beanclass="exatrez.stripes.util.ShipVisitListUtil" var="visitlist"/>
        <s:form beanclass="exatrez.stripes.action.ShipVisitFlowAction" name="form1">
            <s:hidden name="counterId" />
            <s:hidden name="currentYear" />
            <s:hidden name="shipVisitFlowId" />
            <div>
                <fieldset>
                    <div id="page-title">
                        <span class="title">Ship Visit</span>
                    </div>
                    <div style="align: center">
                        <span class="sub-title">Ship visit target as per year ${actionBean.currentYear}</span>
                        <display:table class="tablecloth" name="${actionBean.listCounter}" requestURI="/shipVisitFlow" id="line" style="width:50%">
                            <display:column title="Target Visit" property="target"/>
                            <display:column title="No. of visit" property="visited"/>
                            <display:column title="Total Balance"><c:out value="${line.target - line.visited}" /></display:column>                 
                        </display:table>
                    </div>
                    <div id="page-title">
                        <span class="title">New Ship Visit Form</span>
                    </div>
                    <s:messages/>
                    <s:errors/>
                    <c:if test="${!actionBean.crewDetails}">
                        <p class="validateTips"><em>All form fields are required except Attachment/s.</em></p>
                    </c:if>
                    <table border="0" align="center" width="100%">
                        <tr>
                            <td width="40%" style="vertical-align: top; text-align: right;"><b>Name of Ship</b></td>
                            <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                            <td width="8%" style="vertical-align: top; text-align: left;">
                                <s:select name="shipVisitFlow.vessel.vesselId" id="vesselId" style="width:200px" onchange="getImoTonnage(this.value);">
                                    <s:option value="">Please Choose</s:option>
                                    <s:options-collection collection="${list.vesselList}" label="vesselName" value="vesselId"/>
                                </s:select>
                            </td>
                            <td width="5%" style="vertical-align: top; text-align: left;">&nbsp;</td>
                            <td width="40%" style="vertical-align: top; text-align: right;"><b>Date of Inspection</b></td>
                            <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                            <td width="8%" style="vertical-align: top; text-align: left;">
                                <s:text name="shipVisitFlow.dateVisit" id="datepicker2" formatType="date" formatPattern="dd/MM/yyyy" readonly="true"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top; text-align: right;"><b>Place of Inspection</b></td>
                            <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                            <td style="vertical-align: top; text-align: left;">
                                <s:text name="shipVisitFlow.location" id="location" size="45" class="uppercase" />
                            </td>
                            <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                            <td style="vertical-align: top; text-align: right;"><b>Master's Name</b></td>
                            <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                            <td style="vertical-align: top; text-align: left;">
                                <s:text name="shipVisitFlow.masterName" id="master" size="45" class="uppercase" />
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top; text-align: right;"><b>IMO Number</b></td>
                            <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                            <td style="vertical-align: top; text-align: left;">
                                <s:text name="shipVisitFlow.imoNumber" id="imo" size="45" readonly="true"/>
                            </td>
                            <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                            <td style="vertical-align: top; text-align: right;"><b>Gross Tonnage</b></td>
                            <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                            <td style="vertical-align: top; text-align: left;">
                                <s:text name="shipVisitFlow.grossTonnage" id="gross" size="45" readonly="true" />
                            </td>
                        </tr>
                        <c:if test="${!actionBean.crewDetails}">
                            <tr>
                                <td style="vertical-align: top; text-align: center;" colspan="7"><b>Attachment/s :</b><s:button name="" value="Upload..." class="btn" onclick="return popupWin('${actionBean.staffId}');"/></td>
                            </tr>
                            <tr>
                                <td style="vertical-align: top; text-align: right;" colspan="7">
                                    <s:submit name="saveCrew" value="Save" class="btn" onclick="return validateEmpty();"/>
                                </td>
                            </tr>
                        </c:if>
                        <c:if test="${actionBean.crewDetails}" >
                            <tr>
                                <td style="vertical-align: top; text-align: center;" colspan="7"><b>Attachment/s :</b><s:button name="" value="View" class="btn" onclick="return popupWinView('${actionBean.shipVisitFlowId}');"/></td>
                            </tr>
                        </c:if>
                    </table>
                </fieldset>
            </div>
            <c:if test="${actionBean.crewDetails}" >
                <p class="validateTips"><em>Note : All form fields are required for each tab's before click button 'Submit'.</em></p>
                <div id="tabs">
                        <ul >
                            <li><a href="#tabs-1" id="t1">1</a></li>
                            <li><a href="#tabs-2" id="t2">2</a></li>
                            <li><a href="#tabs-3" id="t3">3</a></li>
                            <li><a href="#tabs-4" id="t4">4</a></li>
                            <li><a href="#tabs-5" id="t5">5</a></li>
                            <li><a href="#tabs-6" id="t6">6</a></li>
                            <li><a href="#tabs-7" id="t7">7</a></li>
                            <li><a href="#tabs-8" id="t8">8</a></li>
                            <li><a href="#tabs-9" id="t9">9</a></li>
                            <li><a href="#tabs-10" id="t10">10</a></li>
                            <li><a href="#tabs-11" id="t11">11</a></li>
                            <li><a href="#tabs-12" id="t12">12</a></li>
                            <li><a href="#tabs-13" id="t13">13</a></li>
                            <li><a href="#tabs-14" id="t14">14</a></li>
                            <li><a href="#tabs-15" id="t15">${visitlist.header15}</a></li>
                        </ul>
                    <c:set var="c" value="0" />
                    <div id="tabs-1">
                        <div id="page-title">
                            <span class="title">${visitlist.header1}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc1}" requestURI="/shipVisitFlow" id="line1" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <%--<display:column title="No.">${c}</display:column>--%>
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>
                    </div>
                    <div id="tabs-2">
                        <div id="page-title">
                            <span class="title">${visitlist.header2}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc2}" requestURI="/shipVisitFlow" id="line2" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <%--<display:column title="No.">${c}</display:column>--%>
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>
                    </div>
                    <div id="tabs-3">
                        <div id="page-title">
                            <span class="title">${visitlist.header3}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc3}" requestURI="/shipVisitFlow" id="line3" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>
                    </div>
                    <div id="tabs-4">
                        <div id="page-title">
                            <span class="title">${visitlist.header4}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc4}" requestURI="/shipVisitFlow" id="line4" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30" /></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-5">
                        <div id="page-title">
                            <span class="title">${visitlist.header5}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc5}" requestURI="/shipVisitFlow" id="line5" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-6">
                        <div id="page-title">
                            <span class="title">${visitlist.header6}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc6}" requestURI="/shipVisitFlow" id="line6" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-7">
                        <div id="page-title">
                            <span class="title">${visitlist.header7}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc7}" requestURI="/shipVisitFlow" id="line7" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-8">
                        <div id="page-title">
                            <span class="title">${visitlist.header8}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc8}" requestURI="/shipVisitFlow" id="line8" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-9">
                        <div id="page-title">
                            <span class="title">${visitlist.header9}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc9}" requestURI="/shipVisitFlow" id="line9" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-10">
                        <div id="page-title">
                            <span class="title">${visitlist.header10}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc10}" requestURI="/shipVisitFlow" id="line10" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-11">
                        <div id="page-title">
                            <span class="title">${visitlist.header11}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc11}" requestURI="/shipVisitFlow" id="line11" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-12">
                        <div id="page-title">
                            <span class="title">${visitlist.header12}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc12}" requestURI="/shipVisitFlow" id="line12" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-13">
                        <div id="page-title">
                            <span class="title">${visitlist.header13}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc13}" requestURI="/shipVisitFlow" id="line13" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-14">
                        <div id="page-title">
                            <span class="title">${visitlist.header14}</span>
                        </div>
                            <display:table class="tablecloth" name="${visitlist.listDesc14}" requestURI="/shipVisitFlow" id="line14" style="width:100%">
                                <c:set var="c" value="${c+1}" />
                                <display:column title="References" property="svDescId" style="width:150px;"/>
                                <display:column title="Description" property="description" style="text-align:left;"/>
                                <display:column title="Compliances">
                                    <s:select name="compliances" id="compliance_${c}" style="width:130px">
                                        <%--<s:option value="">Please Choose</s:option>--%>
                                        <s:options-collection collection="${visitlist.listCompliance}" label="description" value="svCompId"/>
                                    </s:select>
                                </display:column>
                                <display:column title="Remarks"><s:textarea name="remarks" id="summary_${c}" rows="3" cols="30"/></display:column>
                            </display:table>                    
                    </div>
                    <div id="tabs-15">
                        <div id="page-title">
                            <span class="title">${visitlist.header15}</span>
                        </div>
                        <p>
                            <label>&nbsp;</label>
                            <s:textarea name="shipVisitFlow.summary" id="summary" rows="10" cols="70"/>
                        </p>                        
                    </div>
                </div>
                <div>
                    <table border="0" align="center" width="100%">
                        <tr>
                            <td style="vertical-align: top; text-align: right;" colspan="7">
                                <s:submit name="saveCrewSend" value="Submit" class="btn" onclick="autoComplete();"/>
                            </td>
                        </tr>
                    </table>
                </div>
            </c:if>
        </s:form>
    </body>
</html>